<!-- 头部导航 -->
<template>
  <div class="navbar">
    <div class="nav_left">
      <el-menu :default-active="activeIndex"
               class="el-menu-demo"
               mode="horizontal"
               @select="handleSelect">
        <template v-for="(item, idx) in list">
          <el-menu-item v-if="item.meta.isShowNav"
                        :key="idx"
                        :index="item.path">{{item.name}}</el-menu-item>
        </template>
      </el-menu>
    </div>
    <div class="nav_right">
      <el-dropdown @command="sumbitUser">
        <div class="user_info">
          <el-avatar size="small"
                     :src="circleUrl"></el-avatar>
          <span class="user_name">{{userInfo.username}}</span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="info">个人信息</el-dropdown-item>
          <el-dropdown-item command="reset">修改密码</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: "/",
      userInfo: '',
      list: this.$router.options.routes,
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  components: {},
  created () {
    this.$req.get(this.$api.getUser).then(res => {
      this.userInfo = res.data;
    });
  },
  methods: {
    // 点击路由时跳转
    handleSelect (key) {
      this.$router.push(key);
    },
    // 点击用户选项时触发
    sumbitUser (command) {
      switch (command) {
        case "info":
          // 修改个人信息
          break;
        case "reset":
          // 修改密码
          break;
        case "logout":
          // 退出登录
          sessionStorage.removeItem('routerList');
          localStorage.removeItem('token');
          this.$router.push("/login");
          // this.$req.get(this.$api.logout).then(res => {
          //   console.log(res);
          //   this.$msg({
          //     showClose: true,
          //     message: "退出成功",
          //     type: "success"
          //   });
          //   localStorage.removeItem('token');
          //   this.$router.push("/login");
          // });
          break;
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.navbar {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  width: 90%;
  height: 62px;
  padding-left: 100px;
  padding-right: 100px;
  border: 1px solid #e6e6e6;
  .nav_left {
  }
  .nav_right {
    min-width: 200px;
    display: flex;
    align-items: center;
    .user_info {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e6e6e6;
      }
      .user_name {
        margin-left: 10px;
      }
    }
  }
  .el-menu-item {
    width: 100px;
  }
}
</style>